body,ul{
  padding: 0;
  margin: 0;
}
li{
  list-style: none;
}
.clock{
  width: 230px;
  height: 230px;
  background: #000000;
  margin: 100px auto;
  border-radius: 40px;
  /*overflow: hidden;*/

  position: relative;
}
.dial{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;

  width: 200px;
  height: 200px;
  border-radius: 50%;
  /*margin: 15px auto;*/
  background: #fff;
}
li{
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  margin-left: -15px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  /*设置围绕旋转的圆心 ↓ */
  transform-origin: 15px 100px;
}
li span{
  display: inline-block;
}

/*li:nth-child(1) span{*/
/*  transform: rotate(-30deg);*/
/*}*/
/*li:nth-child(2) span{*/
/*  transform: rotate(-60deg);*/
/*}*/
/*li:nth-child(3) span{*/
/*  transform: rotate(-90deg);*/
/*}*/
/*li:nth-child(4) span{*/
/*  transform: rotate(-120deg);*/
/*}*/
/*li:nth-child(5) span{*/
/*  transform: rotate(-150deg);*/
/*}*/
/*li:nth-child(6) span{*/
/*  transform: rotate(-180deg);*/
/*}*/
/*li:nth-child(7) span{*/
/*  transform: rotate(-210deg);*/
/*}*/
/*li:nth-child(8) span{*/
/*  transform: rotate(-240deg);*/
/*}*/
/*li:nth-child(9) span{*/
/*  transform: rotate(-270deg);*/
/*}*/
/*li:nth-child(10) span{*/
/*  transform: rotate(-300deg);*/
/*}*/
/*li:nth-child(11) span{*/
/*  transform: rotate(-330deg);*/
/*}*/
/*li:nth-child(12) span{*/
/*  transform: rotate(-360deg);*/
/*}*/

/*li:nth-child(1){*/
/*   transform: rotate(30deg);*/
/* }*/
/*li:nth-child(2){*/
/*  transform: rotate(60deg);*/
/*}*/
/*li:nth-child(3){*/
/*  transform: rotate(90deg);*/
/*}*/
/*li:nth-child(4){*/
/*  transform: rotate(120deg);*/
/*}*/
/*li:nth-child(5){*/
/*  transform: rotate(150deg);*/
/*}*/
/*li:nth-child(6){*/
/*  transform: rotate(180deg);*/
/*}*/
/*li:nth-child(7){*/
/*  transform: rotate(210deg);*/
/*}*/
/*li:nth-child(8){*/
/*  transform: rotate(240deg);*/
/*}*/
/*li:nth-child(9){*/
/*  transform: rotate(270deg);*/
/*}*/
/*li:nth-child(10){*/
/*  transform: rotate(300deg);*/
/*}*/
/*li:nth-child(11){*/
/*  transform: rotate(330deg);*/
/*}*/
/*li:nth-child(12){*/
/*  transform: rotate(360deg);*/
/*}*/

.point{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5px;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
}
.hour{
  position: absolute;
  left: 50%;
  top: 45px;
  margin-left: -2px;
  width: 4px;
  height: 70px;
  background: #000;
  /*transform: rotate(30deg);*/
  transform-origin: 2px 70px;
}
.min{
  position: absolute;
  left: 50%;
  top: 25px;
  margin-left: -2px;
  width: 4px;
  height: 90px;
  background: #000;
  transform-origin: center bottom;
  /*transform: rotate(60deg);*/
}
.second{
  position: absolute;
  top: 25px;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 100px;
  background: orangered;
  transform-origin: center 90px;
  /*transform: rotate(90deg);*/
  border-radius: 2px;
}













